<template>
  <div>
    <div class="content">
      <Barrage style="width: 100%" />
      <div id="drugimg">
        <div id="left">
          <img :src="productInfo.cover" alt="" />
          <span v-show="!!infoheader.is_prescription == 1">处方药</span>
        </div>
        <div id="right">
          <h3>{{ productInfo.title }}</h3>
          <p>{{ productInfo.sell_point }}</p>
          <template v-for="item in infoheader.spec_data" :key="item.name">
            <p>
              {{ item.name }}
            </p>
          </template>
          <div>
            <p>
              <span>￥{{ defaultSkuInfo.price }}</span>
            </p>
          </div>
        </div>
      </div>
      <div id="drugInfo">
        <div>
          <p>批准文号</p>
          <p>{{ infoheader.approval_no }}</p>
        </div>
        <div>
          <p>品牌名称</p>
          <p>{{ infoheader.brand_name }}</p>
        </div>
        <div>
          <p>制造商</p>
          <p>{{ infoheader.manufacturer }}</p>
        </div>
        <div>
          <p>成分</p>
          <p>{{ infoheader.component }}</p>
        </div>
        <div>
          <p>适应症</p>
          <p>{{ infoheader.indication }}</p>
        </div>
        <div>
          <p>用法用量</p>
          <p>{{ infoheader.usage_dosage }}</p>
        </div>
        <div>
          <p>不良反应</p>
          <p>{{ infoheader.adverse_reaction }}</p>
        </div>
        <div>
          <p>禁忌</p>
          <p>{{ infoheader.contraindication }}</p>
        </div>
        <div>
          <p>注意事项</p>
          <p>{{ infoheader.attention }}</p>
        </div>
        <div>
          <p>贮藏</p>
          <p>{{ infoheader.storage_method }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Barrage from "./Consult/Barrage.vue";
import { ref } from "vue";
import { getInfos } from "../API";
import { useCount } from "../store/index.js";
let store = useCount();
let infoheader = ref({});
let productInfo = ref({});
let defaultSkuInfo = ref({});

let getInfoDiv = async () => {
  let id = store.params.id;
  let r = await getInfos(id);
  // console.log(r.data);
  // drug_instruction_info对象
  infoheader.value = r.data.data.drug_instruction_info;
  // product_info对象
  productInfo.value = r.data.data.product_info;
  defaultSkuInfo.value = r.data.data.default_sku_info;
  // console.log(infoheader.value);
  // console.log(info.value);
  // console.log(productInfo.value);
};
getInfoDiv();
</script>
<style scoped>
.content {
  padding: 16px 16px 160px;
  border-top: 1px solid #efefef;
}
#drugimg {
  width: 100%;
  padding-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}
#left {
  width: 210px;
  height: 230px;
  border-radius: 35px;
  overflow: hidden;
  position: relative;
}
#left span {
  width: 100px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e4e4e4;
  display: flex;
  justify-content: center;
  align-items: center;
}
#left img {
  width: 210px;
  height: 230px;
}
#right {
  width: 400px;
  height: 200px;
  padding: 0 20px;
}
#right p:nth-of-type(1) {
  color: #7d7d7d;
  margin: 15px 0 10px 0px;
}
#right div {
  width: 450px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28px;
}
#right div span:nth-of-type(1) {
  font-weight: bold;
  color: #1ec7af;
  margin-right: 10px;
}
#right div span:nth-of-type(2) {
  color: #7d7d7d;
  text-decoration: line-through;
}
#drugInfo p:nth-of-type(1) {
  font-size: 28px;
  color: #b4b4b4;
  margin: 30px 10px;
}
#drugInfo p:nth-of-type(2) {
  margin-left: 20px;
  color: #767676;
  font-size: 28px;
}
</style>